<template>
  <div class="page">
    <h2>示例 - 固定列</h2>
    <vue-tabulation
      ref="grid"
      :dataSource="dataSource"
      :columns="transformColumns"
      :height="500"
      :hasIndex="true"
      :hasCheckbox="true"
      :resizable="true"
      showSummary
    ></vue-tabulation>
    <p>
      <label>年龄:</label>
      <select v-model="ageFixed">
        <option value="">不固定</option>
        <option value="left">左固定</option>
        <option value="right">右固定</option>
      </select>
    </p>
    <p>
      <label>日期:</label>
      <select v-model="dateFixed">
        <option value="">不固定</option>
        <option value="left">左固定</option>
        <option value="right">右固定</option>
      </select>
    </p>
  </div>
</template>

<script>
export default {
  name: 'demo-fixedColumn',
  data() {
    return {
      ageFixed: 'left',
      dateFixed: 'right',
      dataSource: this.$mock.dataSource(2000).map(item => {
        item.date = '2019-05-01 04:02:00'
        return item
      }),
      columns: this.$mock.columns(),
    }
  },
  computed: {
    transformColumns() {
      return this.columns.map(item => {
        if (item.prop === 'age') {
          item.fixed = this.ageFixed
        }
        if (item.prop === 'date') {
          item.fixed = this.dateFixed
        }
        // item.width = undefined
        return item
      })
    },
  },
}
</script>
